<template>
	<view class="layout">
		<view class='index'>
			<scroll-view scroll-x="true" class='scroll-content' :scroll-into-view='scrollIntoIndex'>
				<view :id="'top'+index" class='scroll-item' v-for='(item,index) in topBar' :key='index'
					@tap='changeTab(index)'>
					<text :class='topBarIndex===index? "f-active-color":"f-color"'>{{item.name}}</text>
				</view>
			</scroll-view>
			<swiper @change="onChangeTab" :current="topBarIndex" :style="'height:'+clentHeight+'px;'">
				<swiper-item>
					<scroll-view scroll-y="true" class="home-data" :style="'height:'+clentHeight+'px;'">
						<homeworks v-for="(item,index) in unSubmitList" :key="index" :title="item.title"
							:courseName="item.courseResourceName" :homeworkId="item.homeWorkId"
							:courseResourceId="item.courseResourceId" v-if="hasHomework">
						</homeworks>
						<l-empty image="order" description="无作业" v-else />
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y="true" class="home-data" :style="'height:'+clentHeight+'px;'">
						<viewSubmited v-for="(item,index) in submitedList" :key="index" :title="item.title"
							:courseName="item.courseResourceName" :submitDate="'提交时间：'+item.submitTime"
							:homeworkId="item.homeWorkId"  v-if="hasJudged">
						</viewSubmited>
						<l-empty image="order" description="无作业" v-else />
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y="true" class="home-data" :style="'height:'+clentHeight+'px;'">
						<viewJudged v-for="(item,index) in judgedList" :key="index" :title="item.title"
							:courseName="item.courseResourceName" :homeworkId="item.homeWorkId"
							:submitDate="'提交时间：'+item.submitTime" :judgeDate="'批改时间：'+item.correctionTime"  v-if="hasJudged">
						</viewJudged>
						<l-empty image="order" description="无作业" v-else />
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onReady
	} from '@dcloudio/uni-app'
	import apis from '../../api/apis.js'
	const topBar = ref([{
			name: '待提交'
		},
		{
			name: '已提交'
		},
		{
			name: '已批改'
		}
	])
	const topBarIndex = ref(0)
	const clentHeight = ref(0)
	const scrollIntoIndex = ref("top0")
	const unSubmitList = ref([])
	const submitedList = ref([])
	const judgedList = ref([])
	const hasHomework = ref(true)
	const hasSubmited = ref(true)
	const hasJudged = ref(true)

	const gethomework = async () => {
		let unSubmitRes = await apis.getStudentHomework(1)
		let submitedRes = await apis.getStudentHomework(2)
		let judgedRes = await apis.getStudentHomework(3)
		console.log(unSubmitRes.data.length)
		if (unSubmitRes.data.length === 0) {
			hasHomework.value = false
		} else {
			unSubmitList.value = unSubmitRes.data
			hasHomework.value = true
		}
		///////////////////////////////////
		if (submitedRes.data.length === 0) {
			hasSubmited.value = false
		} else {
			submitedList.value = submitedRes.data
			hasSubmited.value = true
		}
		///////////////////////////////////
		if (judgedRes.data.length === 0) {
			hasJudged.value = false
		} else {
			judgedList.value = judgedRes.data
			hasJudged.value = true
		}
		console.log(hasHomework.value)

	}
	gethomework()


	function changeTab(index) {
		if (topBarIndex.value === index) {
			return;
		}
		topBarIndex.value = index;
		scrollIntoIndex.value = "top" + index
	}

	const onChangeTab = (e) => {
		changeTab(e.detail.current)
	}

	onReady(() => {
		uni.getSystemInfo({
			success: (res) => {
				clentHeight.value = res.windowHeight
			}
		})

	});

	const getClientHeight = () => {
		const res = uni.getSystemInfoSync();
		const system = res.platform;
		if (system === 'ios') {
			return 44 + res.statusBarHeight;
		} else if (system === 'android') {
			return 48 + res.statusBarHeight;
		} else {
			return 0;
		}
	}
</script>

<style lang="scss" scoped>
	.layout {
		.index {
			.scroll-content {
				width: 100%;
				height: 80rpx;
				white-space: nowrap;
			}

			// 去除滚动轴
			.no-scrollbar {

				/* 隐藏滚动条 */
				::-webkit-scrollbar {
					width: 0 !important;
					/* 隐藏水平滚动条 */
					height: 0 !important;
					/* 隐藏垂直滚动条 */
				}
			}

			.scroll-item {
				display: inline-block;
				padding: 10rpx 74rpx;
				font-size: 32rpx;
			}

			.f-active-color {
				padding: 10rpx 0;
				border-bottom: 6rpx solid #49BDFB;
				color: #49BDFB;
			}

			.f-color {
				color: #636263;
			}

		}
		.coursepop {
			background-color: #fff;
			padding: 30rpx;
			border-radius: 30rpx 30rpx 0 0;
			overflow: hidden;

			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					color: black;
					font-size: 30rpx;
					font-weight: 600;
					// padding-left: 6rpx;
				}

				.close {
					padding: 6rpx;
				}
			}
		}
	}
</style>